<template>
  <div class="yingyuan">
    <div class="info">
      <p class="name">
        <span class="name-o">{{ item.info.name }}</span>
        <span class="sell">{{ item.info.price }}<i>元起</i></span>
      </p>
      <p class="address">{{ item.info.address }}</p>
      <div class="feature">
        <span class="span" v-for="(n, i) in item.info.tags" :key="i">{{
          n
        }}</span>
      </div>
    </div>
    <div class="dis">{{ item.distance }}</div>
  </div>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style lang="less" scoped>
.yingyuan {
  padding: 15px 15px 15px 0;
  margin-left: 12px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  .info {
    width: 290px;
    .name {
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      .name-o {
        font-size: 16px;
        color: #000000;
        display: inline-block;
        width: 214px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .sell {
        font-size: 17px;
        color: #ef4238;
        margin-left: 10px;
        i {
          font-size: 12px;
          color: #999999;
        }
      }
    }
    .address {
      font-size: 13px;
      color: #999999;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .feature {
      margin-top: 7px;
      .span {
        display: inline-block;
        color: #589daf;
        padding: 0 3px;
        line-height: 15px;
        margin-right: 7px;
        margin-top: 2px;
        font-size: 12px;
        border: 1px solid #589daf;
        border-radius: 2px;
        &:nth-last-child(1) {
          color: #ff9900;
          border: 1px solid #ff9900;
        }
      }
    }
  }
  .dis {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #999999;
  }
}
</style>